<template>
	<div class="paper-plane-container">
		<div class="title-bar">纸飞机</div>
		<div class="paper-plane-flexbox">
			<!-- 这里是纸飞机列表 -->
		</div>
		<div class="bottom-bar">
			<div class="bottom-btn" @click="modifyPaperPlane">修改纸飞机</div>
			<div class="bottom-btn" @click="matchChat">匹配聊天</div>
		</div>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				paperPlanes: [{
						id: 1,
						avatar: require('@/static/img/main/avatar.jpg'),
						isRead: true,
						distance: 200,
					},
					{
						id: 2,
						avatar: require('@/static/img/main/avatar.jpg'),
						isRead: false,
						distance: 400,
					},
					// 其他纸飞机信息...
				],
			}
		},
		created() {
			for (let i = 0; i < this.paperPlanes.length; i++) {
				let left = Math.random() * 60 + '%'
				let top = Math.random() * 70 + '%'
				let paperPlane = document.createElement('div')
				paperPlane.className = 'paper-plane'
				paperPlane.style.left = left
				paperPlane.style.top = top
				paperPlane.innerHTML = `
        <img class="avatar" :src="paperPlanes[i].avatar" />
        <div class="content">
          <div
            class="paper-plane-img"
            :class="{ 'read': paperPlanes[i].isRead }"
          ></div>
          <div class="text">
            <div
              class="map-icon"
              style="background-image: url(@/assets/map.png)"
            ></div>
            <div class="distance">{{ paperPlanes[i].distance }}m</div>
          </div>
          <div class="dialogue-box">
            <div class="dialogue-arrow"></div>
            <div class="dialogue-content">
              <div class="map-icon"></div>
              <div class="distance">{{ paperPlanes[i].distance }}m</div>
            </div>
          </div>
        </div>
      `
				document.querySelector('.paper-plane-flexbox').appendChild(paperPlane)
			}
		},
	}
</script>

<style lang="scss" scoped>
	/* 纸飞机容器 */
	.paper-plane-container {
		background-color: #fff;
		height: 100%;
	}

	/* 标题栏 */
	.title-bar {
		width: 100%;
		height: 50px;
		background-color: #0693e3;
		color: #fff;
		font-size: 18px;
		text-align: center;
		line-height: 50px;
	}

	/* 纸飞机flex容器 */
	.paper-plane-flexbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		/* 左右对齐 */
		padding: 10px;
	}

	/* 纸飞机 */
	.paper-plane {
		position: absolute;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		/* 圆形 */
		background-color: #fff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.2s ease-out;
		/* 添加过渡效果 */
		cursor: pointer;

		/* 用户头像 */
		.avatar {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			object-fit: cover;
			margin-bottom: 5px;
		}

		/* 纸飞机图片 */
		.paper-plane-img {
			width: 50px;
			height: 50px;
			background-image: url(@/static/asset/art_photo/feiji.png);
			background-size: contain;
			background-repeat: no-repeat;
			margin-bottom: 10px;
		}

		/* 已看过的纸飞机 */
		.read {
			background-image: url(@/static/asset/art_photo/kekeaiaixiaopenzai-.png);
			background-size: contain;
			background-repeat: no-repeat;
			color: #909090;

			&:after {
				content: '看过';
				font-size: 12px;
				color: #0693e3;
				margin-left: 5px;
			}
		}

		/* 对话框 */
		.dialogue-box {
			position: absolute;
			left: calc(100% + 8px);
			/* 对话框离纸飞机距离 */
			top: 0;
			width: 130px;
			padding: 10px;
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

			/* 对话箭头 */
			.dialogue-arrow {
				position: absolute;
				left: -10px;
				/* 对话箭头位置 */
				top: 10px;
				width: 0;
				height: 0;
				border-top: 10px solid transparent;
				border-right: 10px solid #fff;
				border-bottom: 10px solid transparent;
			}

			/* 对话内容 */
			.dialogue-content {
				display: flex;
				align-items: center;
				justify-content: space-between;

				/* 地图icon */
				.map-icon {
					width: 20px;
					height: 20px;
					background-size: cover;
					background-position: center;
				}

				/* 距离 */
				.distance {
					font-size: 14px;
					color: #909090;
				}
			}
		}
	}

	/* 底部按钮容器 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		height: 50px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* 左右对齐 */
		background-color: #fff;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	}

	/* 底部按钮 */
	.bottom-btn {
		height: 100%;
		width: 50%;
		color: #0693e3;
		font-size: 16px;
		line-height: 50px;
		text-align: center;
		cursor: pointer;

		&:hover {
			background-color: #f6f6f6;
		}
	}
</style>